<template>
  <a-sub-menu :key="menuInfo.key" @click.stop="clickItem">
    <template #title>
      <span class="sub-menu-lable">{{ menuInfo.label }}</span>
    </template>
    <template #icon>
      <!-- <component :is="menuInfo.icon || 'icon-menu'" style="font-size: 16px; vertical-align: middle" /> -->
      <i class="icon-menu" :class="menuInfo.icon || 'icon-settings'" style="font-size: 16px; vertical-align: middle"></i>
    </template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!(item.children && item.children.length)">
        <a-menu-item :class="{ 'path-item': item.path }" :key="item.key">
          <template #icon>
            <!-- <component :is="item.icon || 'icon-menu'" /> -->
            <i class="icon-menu" :class="item.icon || 'icon-settings'"></i>
          </template>
          {{ item.label }}
          <icon-copy class="copy-path" v-if="item.path" @click.stop="openPath(item.path)" />
        </a-menu-item>
      </template>
      <template v-else>
        <SubMenu :menu-info="item" :key="item.key" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'SubMenu',
    props: {
      menuInfo: {
        type: Object,
        default: () => ({}),
      },
    },
    emits: ['clickItem'],
    setup(props, { emit }) {
      function clickItem() {
        emit('clickItem', props.menuInfo)
      }
      function openPath(path: string) {
        window.open(window.location.origin + '/#' + path, '_blank')
      }
      return {
        clickItem,
        openPath,
      }
    },
  })
</script>
<style scoped lang="less">
  :deep(.arco-menu-icon) {
    margin-right: 10px !important;
  }

  .sub-menu-lable {
    flex: 1;
    margin-left: 3px;
  }
  .copy-path {
    position: absolute;
    top: 14px;
    margin-left: 3px;
    display: none;
  }
  .path-item:hover {
    position: relative;
    .copy-path {
      display: inline-block;
    }
  }
</style>
